<style lang="less" scoped>
@import "../assets/css/config.less";
@edit-header:  #F7F6F4;
* {
  margin: 0;
  padding: 0;
}
.flex-row {
  display: flex;
  justify-self: flex-start;
}
.title {
  margin-top: 10px;
  margin-bottom: 0px;
  font-size: 10px;
}
.demo-name {
  margin: 10px;
}
#runnob {
  padding-bottom: 40px;
}
.tabs-container {
  width: 90%;
}

.tabs-body {
  height: 400px;
}

.display {
  font-size: 20px;
  font-weight: bold;
}

.card {
  width: 98%;
  margin-top: 10px;
  margin-bottom: 20px;
  div,
  p {
    color: #3b3d45;
    font-size: 16px;
    text-align: left;
  }
}

.disabled {
  opacity: 0.6;
}
.header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 100;
  min-width: 1210px;
}
.content {
  margin-top: 78px;
  min-width: 1210px;
}
.flex {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.right {
  position: absolute;
  right: 0;
  margin-right: 20px;
}
.guide_person{
  width: 100px;
  height: 150px;
}
.code-editor{
  flex: 1;
  background-color: #F7F7F7;
}
.code-iframe{
  flex: 1;
  border: @border;
  iframe{
    outline: none;
    border: none;
    width: 100%;
    height: 95%;
  }
}
.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: @edit-header;
  border-bottom: 2px solid #bdb6a5;
  overflow: visible;
  position: relative;
  .tab-item{
    font-size: 13px;
    width: 90px;
    line-height: 36px;
    text-align: center;
    color: #000;
    border-right: 2px solid #bdb6a5;
    cursor: pointer;
    overflow: visible;
    &.active{
      background-color: #F7F7F7;
      color: @color1;
      border-bottom: none;
      cursor: default;
      overflow: visible;
      &::after{
        content: '';
        position: absolute;
        top: 0;
        display: block;
        width: 89px;
        height: 4px;
        background-color: #F7F7F7;
        transform: translateY(35px);
      }
    }
  }
}
.button3 {
  line-height: 32px;
  background-color: @color1;
  border: 1px solid @color1;
  color: @white;
  border-radius: 4px;
  font-size: 14px;
  width: 80px;
  letter-spacing: 2px;
  outline: none;
  cursor: pointer;
  &:hover {
    background-color: @color2;
    color: @white;
  }
  &:active {
    background-color: @color3;
    color: @white;
  }
}
</style>
<style lang="less">
  .CodeMirror-scroll{
    height: 500px;
  }
  .CodeMirror {
    height: 100% !important;
  }
</style>

<template>
  <div id="runnob" style="text-align:left">
    <div class="header">
      <myheader></myheader>
    </div>
    <div id="content" class="content">
      <el-row class="title" type="flex" justify="center" style="margin-bottom:30px">
        <el-col :span="22">
          <button class="button3" @click="concat">提交运行</button>
        </el-col>
      </el-row>

      <el-row style="flex: 1" type="flex" justify="center">
          <el-col :span="22">
            <div class="flex-row">
              <div class="code-editor">
                <div class="tab-header">
                  <!-- <div
                    style="width:120px;text-align:center"
                    :class="isactive === index ? 'is-active' : ''"
                    v-for="(item, index) in code_type"
                    :key="index"
                    @click="codeTypeClick(index)"
                  >
                    {{ item }}
                  </div> -->
                  <div class="flex-row">
                    <div
                      class="tab-item"
                      :class="isactive === index ? 'active' : ''"
                      v-for="(item, index) in code_type"
                      :key="index"
                      @click="codeTypeClick(index)"
                    >
                      {{ item }}
                    </div>
                  </div>

                </div>
                <div>
                  <div v-if="isactive === 0">
                    <codemirror
                      class="code-mirror"
                      v-model="html_code"
                      :options="html_option"
                      @change="html_change"
                      @focus.native.capture="
                        currentEdit !== 'html' ? sendRecord : ''
                      "
                    ></codemirror>
                  </div>
                  <div v-if="isactive === 1">
                    <codemirror
                      class="code-mirror"
                      v-model="js_code"
                      :options="js_option"
                      ref="js_editor"
                      @keyup.native="showCodeTips($event, 'js_editor')"
                      @change="js_change"
                      @focus.native.capture="
                        currentEdit !== 'js' ? sendRecord : ''
                      "
                    ></codemirror>
                  </div>
                  <div v-if="isactive === 2">
                    <codemirror
                      class="code-mirror"
                      v-model="css_code"
                      :options="css_option"
                      ref="css_editor"
                      @keyup.native="showCodeTips($event, 'css_editor')"
                      @change="css_change"
                      @focus.native.capture="currentEdit !== 'css' ? sendRecord : ''"
                    ></codemirror>
                  </div>
                </div>
              </div>
              
              <div class="code-iframe">
                <div class="display">预览效果</div>
                <iframe
                  ref="iframeBox"
                  v-bind:srcdoc="present"
                ></iframe>
              </div>
            </div>
          </el-col>
        </el-row>

      <div
        style="position:fixed; top: 100px; left: 40%;display: flex;flex-direction: row;width:100px;height:30px;z-index:10"
        v-if="visible_one"
      >
        <img class="guide_person" src="@/components/guide_person.png" style="z-index:100" />
        <el-popover placement="top" width="350" v-model="visible_one" style="margin-left:10px;">
          <span>探索之旅开始啦，先来看看html中你认识哪些内容吧~</span>
          <div style="text-align: right; margin: 0">
            <button class="button3" @click="guide_one">确定</button>
          </div>
        </el-popover>
      </div>

      <div
        style="position:fixed; top: 100px; left: 40%;display: flex;flex-direction: row;width:100px;height:30px;z-index:10"
        v-if="visible_two"
      >
        <img class="guide_person" src="@/components/guide_person.png" style="z-index:100" />
        <el-popover placement="top" width="350" v-model="visible_two" style="margin-left:10px;">
          <span>span、input这些你也许都见过吧，或许还有更多你熟悉的内容。</span>
          <div style="text-align: right; margin: 0">
            <button class="button3" @click="guide_two">下一步</button>
          </div>
        </el-popover>
      </div>

      <div
        style="position:fixed; top: 450px; left: 50%;display: flex;flex-direction: row;width:100px;height:30px;z-index:10"
        v-if="visible_three"
      >
        <img class="guide_person" src="@/components/guide_person.png" style="z-index:100" />
        <el-popover placement="top" width="350" v-model="visible_three" style="margin-left:10px;">
          <div>看着这些代码是不是很头晕？让我们一点一点来捋，看到“商品”、“数量”两个词，对照预览效果，不难可以猜出这四行代码是对应预览效果中的第一行，随便改点什么验证一下自己的猜想吧~</div>
          <div style="text-align: right; margin: 0">
            <button class="button3" @click="guide_three">去验证</button>
          </div>
        </el-popover>
      </div>

      <div
        style="position:fixed; top: 160px; left: 30%;display: flex;flex-direction: row;width:100px;height:30px;z-index:10"
        v-if="visible_four"
      >
        <img class="guide_person" src="@/components/guide_person.png" style="z-index:100" />
        <el-popover placement="top" width="350" v-model="visible_four" style="margin-left:10px;">
          <div>比如在&lt;th&gt;数量&lt;/th&gt;下面添加一行：</div>
          <div>&lt;th&gt;单价&lt;/th&gt;</div>
          <div>你也可以根据自己的想法验证猜想哦。快去点击“提交运行”按钮验证一下自己的猜想吧！</div>
        </el-popover>
      </div>

      <div
        style="position:fixed; top: 100px; left: 40%;display: flex;flex-direction: row;width:100px;height:30px;z-index:10"
        v-if="visible_five"
      >
        <img class="guide_person" src="@/components/guide_person.png" style="z-index:100" />
        <el-popover placement="top" width="350" v-model="visible_five" style="margin-left:10px;">
          <div>看看预览效果中的结果，第一行确实发生了改变，验证了我们的猜想。快去将你的代码还原，并点击“提交运行”按钮，将其恢复原样吧~</div>
        </el-popover>
      </div>

      <div
        style="position:fixed; top: 100px; left: 40%;display: flex;flex-direction: row;width:100px;height:30px;z-index:10"
        v-if="visible_six"
      >
        <img class="guide_person" src="@/components/guide_person.png" style="z-index:100" />
        <el-popover placement="top" width="350" v-model="visible_six" style="margin-left:10px;">
          <div>可是我们发现，每一行的宽度太窄了，并不十分美观。将它调整一下变得更加美观吧，~</div>
          <div style="text-align: right; margin: 0">
            <button class="button3" @click="guide_six">去调整</button>
          </div>
        </el-popover>
      </div>

      <div
        style="position:fixed; top: 100px; left: 40%;display: flex;flex-direction: row;width:100px;height:30px;z-index:10"
        v-if="visible_seven"
      >
        <img class="guide_person" src="@/components/guide_person.png" style="z-index:100" />
        <el-popover placement="top" width="350" v-model="visible_seven" style="margin-left:10px;">
          <div>我们需要来看css中的内容了。刚刚我们改的一直是th和tr中的内容，所以我们可以推断出需要改的应该就在这对应的三行中。</div>
          <div>具体需要修改哪个参数呢？拿不准的话就改一下每个参数值，确定一下自己的想法吧。</div>
          <div style="text-align: right; margin: 0">
            <button class="button3" @click="guide_seven">下一步</button>
          </div>
        </el-popover>
      </div>

      <div
        style="position:fixed; top: 100px; left: 40%;display: flex;flex-direction: row;width:100px;height:30px;z-index:10"
        v-if="visible_eight"
      >
        <img class="guide_person" src="@/components/guide_person.png" style="z-index:100" />
        <el-popover placement="top" width="350" v-model="visible_eight" style="margin-left:10px;">
          <div>没错，我们需要改padding的值。将5px改为10px，点击“提交运行”按钮，看看有什么变化吧！</div>
        </el-popover>
      </div>

      <div
        style="position:fixed; top: 100px; left: 40%;display: flex;flex-direction: row;width:100px;height:30px;z-index:10"
        v-if="visible_nine"
      >
        <img class="guide_person" src="@/components/guide_person.png" style="z-index:100" />
        <el-popover placement="top" width="350" v-model="visible_nine" style="margin-left:10px;">
          <div>确实好看了许多！但是好像还不完美，将10px改为50px，点击“提交运行”按钮，再看看有什么改变吧~</div>
        </el-popover>
      </div>

      <div
        style="position:fixed; top: 100px; left: 40%;display: flex;flex-direction: row;width:100px;height:30px;z-index:10"
        v-if="visible_ten"
      >
        <img class="guide_person" src="@/components/guide_person.png" style="z-index:100" />
        <el-popover placement="top" width="350" v-model="visible_ten" style="margin-left:10px;">
          <div>太棒了！经过一番探索，一个小改造完成了！相信你还有很多思路或创新，快去自己尝试一下吧。</div>
          <div style="text-align: right; margin: 0">
            <button class="button3" @click="guide_ten">完成</button>
          </div>
        </el-popover>
      </div>
    </div>
  </div>
</template>
<script>
import header from "../components/header.vue";

import { codemirror } from "vue-codemirror-lite";
require("codemirror/mode/javascript/javascript");
require("codemirror/mode/css/css");
require("codemirror/mode/xml/xml");
require("codemirror/mode/vue/vue");
require("codemirror/addon/hint/show-hint.js");
require("codemirror/addon/hint/show-hint.css");
require("codemirror/addon/hint/javascript-hint.js");
require("codemirror/addon/hint/css-hint.js");
require("codemirror/addon/hint/xml-hint.js");
require("codemirror/addon/selection/active-line.js");
require("codemirror/addon/selection/active-line.js");
require("codemirror/addon/edit/closetag.js");
require("codemirror/theme/monokai.css");

import { mapMutations, mapState } from "vuex";
import {
  ONLINE_CODING_SUBMIT,
  ONLINE_CODING_REALTIME,
  ONLINE_CODING_LEAVETIME
} from "../constants";
import { add_guide } from "../api/api";
export default {
  name: "runnob",
  data() {
    return {
      bg: {
        width: `${window.innerWidth}px`,
        height: "auto",
        overflow: "auto"
      },
      present: "",
      html_code: "",
      css_code: "",
      js_code: "",
      userUUID: "",
      currentEdit: "",
      startTime: Date,
      isChange: false, //标识是否修改了代码
      // urlCoding: "http://localhost:8081/api/saveCodeRecord"
      urlCoding: "https://www.ourspark.org/api/saveCodeRecord",
      code_type: ["html代码", "js代码", "css代码"],
      isactive: 0,
      visible_one: true,
      visible_two: false,
      visible_three: false,
      visible_four: false,
      visible_five: false,
      visible_six: false,
      visible_seven: false,
      visible_eight: false,
      visible_nine: false,
      visible_ten: false,
      guide_process: []
    };
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        let content_top = document.getElementById("content").offsetTop;
        this.bg.height = `${window.innerHeight - content_top - 2}px`;
        this.bg.width = `${window.innerWidth}px`;
      })();
    };
    let content_top = document.getElementById("content").offsetTop;
    this.bg.height = `${window.innerHeight - content_top - 2}px`;

    this.startTime = +new Date();
    this.userUUID = this.$store.state.UUID;
    this.guide_process.push({
      start_time: this.startTime,
      end_time: ""
    });
    add_guide({
      UUID: this.userUUID,
      guide: this.guide_process
    }).then(res => {
      if (res.state === true) {
        this.guide_process = [];
      }
    });
    this.html_code =
      '\n<body class="bgc">\n    <table id="cartTable">\n        <thead>\n            <tr class="order_content">\n               <th>商品</th>\n                <th>数量</th>\n                </tr>\n\n        </thead>\n        <tbody>\n            <tr class="order_content">\n                <td class="goods">\n                    <img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i1/1776456424/O1CN01jHCfmX1xKEv13ZYbX_!!0-item_pic.jpg_580x580Q90.jpg_.webp">\n                    <span>iphone苹果11</span>\n                </td>\n                <td class="count">\n                    <span class="reduce">-</span>\n                    <input class="count_input" type="text" value="1"/>\n                    <span class="add">+</span>\n                </td>\n                </tr>\n            <tr class="order_content">\n                <td class="goods"><img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/883737303/O1CN01yS0ywE23op3ySGovN_!!0-item_pic.jpg_580x580Q90.jpg_.webp"><span>vivo s6</span></td>\n               <td class="count">\n                    <span class="reduce">-</span>\n                    <input class="count_input" type="text" value="1"/>\n                    <span class="add">+</span>\n                </td>\n                </tr>\n            </tbody>\n    </table>\n\n    </body>\n';
    this.css_code =
      '.bgc{\n  background-color: #E1F1FF;\n}\n\nth,tr,td{\n  height: 1px;\n  border-bottom: solid #ACC0D8 1px;\n  padding: 5px;\n}\n.count_input{\n    width: 39px;\n    height: 15px;\n    line-height: 15px;\n    border: 1px solid #aaa;\n    color: #343434;\n    text-align: center;\n    padding: 4px 0;\n    background-color: #fff;\n}\nimg{\n\twidth:100px;\n}\nspan.add, span.reduce{\n    height: 23px;\n    width: 27px;\n    border: 1px solid #e5e5e5;\n    background: #f0f0f0;\n    line-height: 23px;\n    color: #444;\n}\n.goods span{\n  position: relative;\n  top: -45px;\n  padding-left: 5px;\n}\n';
    this.js_code = '// 本引导案例用于演示如何自己探索代码功能，比较基础，不包含 js 部分的代码哦~';
    this.present = `<html>${this.html_code}<\/html><style>${this.css_code}<\/style><script>${this.js_code}<\/script>`;
  },

  computed: {
    html_option: function() {
      return {
        mode: "text/html",
        tabSize: 4,
        lineNumbers: true,
        lineWrapping: true,
        styleActiveLine: true,
        autoCloseTags: true,
        theme: "monokai"
        // lineSeparator:"&@&@&;"
      };
    },
    js_option: function() {
      return {
        mode: "text/javascript",
        tabSize: 4,
        lineNumbers: true,
        lineWrapping: true,
        styleActiveLine: true,
        theme: "monokai"
        // lineSeparator:"&@&@&;"
      };
    },
    css_option: function() {
      return {
        mode: "text/css",
        tabSize: 4,
        lineNumbers: true,
        lineWrapping: true,
        styleActiveLine: true,
        theme: "monokai"
        // lineSeparator:"&@&@&;"
      };
    },
    ...mapState(["record"])
  },
  methods: {
    codeTypeClick(index) {
      this.isactive = index;
    },

    html_change: function(obj) {
      this.isChange = true;
      this.currentEdit = "html";
      this.html_code = "<html>" + obj + "</html>";
    },
    css_change: function(obj) {
      this.isChange = true;
      this.currentEdit = "css";
      this.css_code = "<html>" + obj + "</html>";
    },
    js_change: function(obj) {
      this.isChange = true;
      this.currentEdit = "js";
      this.js_code = "<html>" + obj + "</html>";
    },
    concat: function() {
      if (this.visible_four) {
        this.visible_four = false;
        this.visible_five = true;
      } else if (this.visible_five) {
        this.visible_five = false;
        this.visible_six = true;
      } else if (this.visible_eight) {
        this.visible_eight = false;
        this.visible_nine = true;
      } else if (this.visible_nine) {
        this.visible_nine = false;
        this.visible_ten = true;
      }
      var that = this;
      // this.present = this.html + this.css + this.js;
      this.present = `<html>${that.html_code}<\/html><style>${that.css_code}<\/style><script>${that.js_code}<\/script>`;
    },
    guide_one() {
      this.visible_one = false;
      this.visible_two = true;
    },
    guide_two() {
      this.visible_two = false;
      this.visible_three = true;
    },
    guide_three() {
      this.visible_three = false;
      this.visible_four = true;
    },
    guide_six() {
      this.visible_six = false;
      this.isactive = 2;
      this.visible_seven = true;
    },
    guide_seven() {
      this.visible_seven = false;
      this.visible_eight = true;
    },
    guide_ten() {
      this.guide_process.push({
        start_time: this.startTime,
        end_time: +new Date()
      });
      add_guide({
        UUID: this.userUUID,
        guide: this.guide_process
      }).then(res => {
        if (res.state === true) {
          this.$router.push({
            name: "demoPractise"
          });
        }
      });
    }
  },
  components: {
    myheader: header
  }
};
</script>
